<template>
  <div ref="echart" class="echart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, onBeforeUnmount, watch, ref, computed, toRefs } from 'vue'

export default {
  name: 'BaseEchart',
  props: {
    // 是否为坐标轴类型图表（如折线图、柱状图）
    isAxisChart: {
      type: Boolean,
      default: true
    },
    // 图表数据
    chartData: {
      type: Object,
      required: true,
      default() {
        return {
          xData: [], // 坐标轴数据（仅axisChart有效）
          series: [] // 系列数据
        }
      }
    },
    // 图表容器样式
    containerStyle: {
      type: Object,
      default() {
        return {
          width: '100%',
          height: '400px'
        }
      }
    }
  },
  setup(props) {
    // 解构props
    const {isAxisChart, chartData, containerStyle} = toRefs(props)
    // 图表实例
    const echart = ref(null)
    // 图表容器DOM
    const echartRef = ref(null)

    // 基础配置（公共部分）
    const baseOption = {
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
      tooltip: {}
    }

    // 坐标轴类型图表配置
    const axisOption = ref({
      ...baseOption,
      legend: {
        textStyle: {
          color: '#333'
        }
      },
      grid: {
        left: '10%',
        right: '5%',
        bottom: '15%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#17b3a3'
          }
        },
        axisLabel: {
          interval: 0,
          color: '#333'
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          }
        }
      ],
      series: []
    })

    // 非坐标轴类型图表配置（如饼图、圆环图）
    const normalOption = ref({
      ...baseOption,
      tooltip: {
        trigger: 'item'
      },
      series: []
    })

    // 计算最终配置项
    const options = computed(() => {
      return isAxisChart.value ? axisOption.value : normalOption.value
    })

    // 初始化图表数据
    const initChartData = () => {
      if (isAxisChart.value) {
        // 更新坐标轴数据
        axisOption.value.xAxis.data = chartData.value.xData
        axisOption.value.series = chartData.value.series
      } else {
        // 更新非坐标轴数据
        normalOption.value.series = chartData.value.series
      }
    }

    // 初始化图表
    const initChart = () => {
      if (!echartRef.value) return

      // 销毁已有实例（避免重复初始化）
      if (echart.value) {
        echart.value.dispose()
      }

      // 初始化新实例
      echart.value = echarts.init(echartRef.value)
      // 设置配置项
      echart.value.setOption(options.value)
    }

    // 处理窗口大小变化
    const handleResize = () => {
      echart.value?.resize()
    }

    // 监听数据变化重新渲染
    watch(
        chartData,
        () => {
          initChartData()
          echart.value?.setOption(options.value)
        },
        {deep: true}
    )

    // 监听图表类型变化重新初始化
    watch(isAxisChart, () => {
      initChart()
    })

    // 组件挂载时初始化
    onMounted(() => {
      initChartData()
      initChart()
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
    })

    // 组件卸载时清理
    onBeforeUnmount(() => {
      if (echart.value) {
        echart.value.dispose()
        echart.value = null
      }
      window.removeEventListener('resize', handleResize)
    })

    return {
      echartRef,
      // eslint-disable-next-line vue/no-dupe-keys
      containerStyle
    }
  },
  styles: `
    .echart-container {
      width: v-bind('containerStyle.width');
      height: v-bind('containerStyle.height');
    }
  `
}
</script>

<style scoped>
/* 基础样式保障 */
.echart-container {
  min-width: 300px;
  min-height: 300px;
}
</style>